<template>
  <div class="dictionary-assist">
    <je-modal
      v-model:visible="visibleModule"
      title="级联字典辅助"
      width="850px"
      class="dictionary-model"
      height="auto"
      :resize="false"
      :maximizable="false"
      :ok-button="addModule"
      cancel-button
      @close="cancelModal"
    >
      <div class="top-explain">
        <p class="explain-one">通过选择数据字典快速的为表添加字段</p>
        <p class="explain-two">【CODE项编码、NAME项名称、ID项主键】按需选择</p>
      </div>
      <div class="dictionary-form">
        <je-form
          ref="formRefModule"
          layout="horizontal"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="modelRef"
        >
          <je-form-item label="字典" v-bind="validateInfos.ddName" name="ddName">
            <je-grid-select
              v-model:value="modelRef.ddName"
              name="ddName"
              :select-options="{ title: '选择字典' }"
              :disabled="modalType == 'assistDept'"
              config-info="JE_CORE_DICTIONARY,ddName~ddCode~ddType,DICTIONARY_DDNAME~DICTIONARY_DDCODE~DICTIONARY_DDTYPE,S"
              :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
              @select="selectFunc"
            />
          </je-form-item>

          <je-row type="flex" justify="space-between" align="middle">
            <je-col :span="6">
              <je-form-item
                label="第一层"
                v-bind="validateInfos.columnName1"
                :label-col="{ span: 8 }"
              >
                <je-input v-model:value="modelRef.columnName1" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item v-bind="validateInfos.columnCode1">
                <je-input v-model:value="modelRef.columnCode1" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item>
                <je-checkbox-group
                  v-model:value="modelRef.columnType1"
                  name="columnType1"
                  :options="typeOptions"
                />
              </je-form-item>
            </je-col>
            <je-col :span="3">
              <je-form-item>
                <je-checkbox v-model:checked="modelRef.columnChecked1">
                  <span style="color: #3265f5">启用</span>
                </je-checkbox>
              </je-form-item>
            </je-col>
          </je-row>

          <je-row type="flex" justify="space-between" align="middle">
            <je-col :span="6">
              <je-form-item
                label="第二层"
                v-bind="validateInfos.columnName2"
                :label-col="{ span: 8 }"
              >
                <je-input v-model:value="modelRef.columnName2" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item v-bind="validateInfos.columnCode2">
                <je-input v-model:value="modelRef.columnCode2" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item>
                <je-checkbox-group
                  v-model:value="modelRef.columnType2"
                  name="columnType2"
                  :options="typeOptions"
                />
              </je-form-item>
            </je-col>
            <je-col :span="3">
              <je-form-item>
                <je-checkbox v-model:checked="modelRef.columnChecked2">
                  <span style="color: #3265f5">启用</span>
                </je-checkbox>
              </je-form-item>
            </je-col>
          </je-row>

          <je-row type="flex" justify="space-between" align="middle">
            <je-col :span="6">
              <je-form-item
                label="第三层"
                v-bind="validateInfos.columnName3"
                :label-col="{ span: 8 }"
              >
                <je-input v-model:value="modelRef.columnName3" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item v-bind="validateInfos.columnCode3">
                <je-input v-model:value="modelRef.columnCode3" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item>
                <je-checkbox-group
                  v-model:value="modelRef.columnType3"
                  name="columnType3"
                  :options="typeOptions"
                />
              </je-form-item>
            </je-col>
            <je-col :span="3">
              <je-form-item>
                <je-checkbox v-model:checked="modelRef.columnChecked3">
                  <span style="color: #3265f5">启用</span>
                </je-checkbox>
              </je-form-item>
            </je-col>
          </je-row>
          <je-row type="flex" justify="space-between" align="middle">
            <je-col :span="6">
              <je-form-item
                label="第四层"
                v-bind="validateInfos.columnName4"
                :label-col="{ span: 8 }"
              >
                <je-input v-model:value="modelRef.columnName4" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item v-bind="validateInfos.columnCode4">
                <je-input v-model:value="modelRef.columnCode4" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item>
                <je-checkbox-group
                  v-model:value="modelRef.columnType4"
                  name="columnType4"
                  :options="typeOptions"
                />
              </je-form-item>
            </je-col>
            <je-col :span="3">
              <je-form-item>
                <je-checkbox v-model:checked="modelRef.columnChecked4">
                  <span style="color: #3265f5">启用</span>
                </je-checkbox>
              </je-form-item>
            </je-col>
          </je-row>
          <je-row type="flex" justify="space-between" align="middle">
            <je-col :span="6">
              <je-form-item
                label="第五层"
                v-bind="validateInfos.columnName5"
                :label-col="{ span: 8 }"
              >
                <je-input v-model:value="modelRef.columnName5" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item v-bind="validateInfos.columnCode5">
                <je-input v-model:value="modelRef.columnCode5" />
              </je-form-item>
            </je-col>
            <je-col :span="7">
              <je-form-item>
                <je-checkbox-group
                  v-model:value="modelRef.columnType5"
                  name="columnType5"
                  :options="typeOptions"
                />
              </je-form-item>
            </je-col>
            <je-col :span="3">
              <je-form-item>
                <je-checkbox v-model:checked="modelRef.columnChecked5">
                  <span style="color: #3265f5">启用</span>
                </je-checkbox>
              </je-form-item>
            </je-col>
          </je-row>
          <je-form-item label="whereSql">
            <je-textarea v-model:value="whereSql" :auto-size="{ minRows: 2, maxRows: 5 }" />
          </je-form-item>
        </je-form>
      </div>
    </je-modal>
  </div>
</template>
<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { Input, Modal, Checkbox, Form, InputSelect } from '@jecloud/ui';
  import { viewColumnCode, addColumnByDDList } from '../../api/index';
  import { verifyData } from '../../helper/common';

  const typeOptions = [
    { label: '名称', value: 'name' },
    { label: '编码', value: 'code' },
    { label: 'ID', value: 'id' },
  ];
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'CascadeDictionaryAssist',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeTextarea: Input.TextArea,
      JeRow: Row,
      JeCol: Col,
      JeCheckbox: Checkbox,
      JeCheckboxGroup: Checkbox.Group,
      JeGridSelect: InputSelect.Grid,
    },
    props: {
      tableData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(true);
      const confirmLoading = ref(false);
      const data = reactive(props.tableData);
      const array = data.RESOURCETABLE_TABLECODE.split('_');
      const TableCode = array[array.length - 1] + '_';

      const modelRef = reactive({
        ddName: '',
        ddCode: '',
        ddType: '',
        columnName1: '',
        columnCode1: '',
        columnType1: ['name', 'code'],
        columnChecked1: false,
        columnName2: '',
        columnCode2: '',
        columnType2: ['name', 'code'],
        columnChecked2: false,
        columnName3: '',
        columnCode3: '',
        columnType3: ['name', 'code'],
        columnChecked3: false,
        columnName4: '',
        columnCode4: '',
        columnType4: ['name', 'code'],
        columnChecked4: false,
        columnName5: '',
        columnCode5: '',
        columnType5: ['name', 'code'],
        columnChecked5: false,
        whereSql: '',
      });

      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData');
      };
      const rulesRef = reactive({
        ddName: [verifyData.required],
        columnName1: verifyData.name,
        columnCode1: verifyData.code,
        columnName2: verifyData.name,
        columnCode2: verifyData.code,
        columnName3: verifyData.name,
        columnCode3: verifyData.code,
        columnName4: verifyData.name,
        columnCode4: verifyData.code,
        columnName5: verifyData.name,
        columnCode5: verifyData.code,
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        //保存数据逻辑
        validate()
          .then(() => {
            //数据处理
            const fields = [],
              codes = [],
              checkFields = [];
            [1, 2, 3, 4, 5].forEach((item) => {
              if (modelRef[`columnChecked${item}`]) {
                const _text = modelRef[`columnName${item}`];
                const _field = modelRef[`columnCode${item}`];
                const _fields = modelRef[`columnType${item}`];
                if (_field != '' && _fields != '') {
                  _fields.forEach((unit) => {
                    const name = _field + '_' + unit.toUpperCase();
                    let configInfo = '',
                      otherConfig = '',
                      text = _text;
                    if (unit == 'code') {
                      var fs = [],
                        cs = [];
                      _fields.forEach((_unit) => {
                        var _name = _field + '_' + _unit.toUpperCase();
                        fs.push(_name);
                        cs.push(_unit);
                      });
                      configInfo = modelRef.ddCode + ',' + fs.join('~') + ',' + cs.join('~') + ',S';
                      otherConfig = '{cascadeField:"' + name + '"}';
                    } else {
                      text = _text + '_' + unit.toUpperCase();
                    }
                    checkFields.push(name);
                    fields.push({
                      text: text,
                      type: unit,
                      name: name,
                      configInfo: configInfo,
                      otherConfig: otherConfig,
                    });
                  });
                }
              }
            });
            if (fields.length > 0) {
              addColumnByDDList({
                strData: JSON.stringify(fields),
                whereSql: modelRef.whereSql,
                JE_CORE_RESOURCETABLE_ID: data.JE_CORE_RESOURCETABLE_ID,
              })
                .then((data) => {
                  btn.loading = false;
                  modal.close();
                  emit('changeData', 'add');
                  Modal.notice(data.message, 'success');
                })
                .catch((e) => {
                  btn.loading = false;
                  Modal.alert(e.message, 'error');
                });
            } else {
              btn.loading = false;
            }
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };

      const selectFunc = ({ rows }) => {
        if (rows && rows.length > 0) {
          const codeArray = rows[0].DICTIONARY_DDCODE.split('_');
          const ddColumnCode = codeArray[codeArray.length - 1];
          modelRef.columnName1 = rows[0].DICTIONARY_DDNAME + '1';
          modelRef.columnCode1 = TableCode + ddColumnCode + '1';
          modelRef.columnName2 = rows[0].DICTIONARY_DDNAME + '2';
          modelRef.columnCode2 = TableCode + ddColumnCode + '2';
          modelRef.columnName3 = rows[0].DICTIONARY_DDNAME + '3';
          modelRef.columnCode3 = TableCode + ddColumnCode + '3';
          modelRef.columnName4 = rows[0].DICTIONARY_DDNAME + '4';
          modelRef.columnCode4 = TableCode + ddColumnCode + '4';
          modelRef.columnName5 = rows[0].DICTIONARY_DDNAME + '5';
          modelRef.columnCode5 = TableCode + ddColumnCode + '5';
        }
      };

      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        addModule,
        visibleModule,
        labelCol: { span: 2 },
        wrapperCol: { span: 21 },
        data,
        typeOptions,
        selectFunc,
      };
    },
  });
</script>
<style lang="less" scoped>
  .dictionary-model {
    .top-explain {
      margin-bottom: 24px;
      position: relative;
      .explain-one {
        font-size: 14px;
        line-height: 22px;
        color: #606060;
        font-weight: Normal;
      }
      .explain-two {
        font-size: 14px;
        font-weight: Normal;
        color: #0000ff;
        line-height: 0px;
        position: absolute;
        left: -7px;
      }
    }
    .dictionary-form {
      background: #f9f9f9;
      padding: 25px 0 1px 30px;
    }
  }
</style>
